Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add TS definitions #56

Merged
merged 7 commits into from
Aug 18, 2017
Merged

add TS definitions #56

merged 7 commits into from
Aug 18, 2017

Conversation

vutran
Copy link
Contributor

@vutran vutran commented Jul 30, 2017

Initial draft of TS definitions as I'm planning to expand this more as I begin porting omnibar over to use the primitive components offered by react-autocompletely.

@codecov-io
Copy link

codecov-io commented Jul 30, 2017

Codecov Report

Merging #56 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@          Coverage Diff          @@
##           master    #56   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           3      3           
  Lines         262    262           
  Branches       63     63           
=====================================
  Hits          262    262

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8563d4b...29b6e24. Read the comment docs.

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is super awesome!

I will merge this and I'm excited to do so with the understanding that I don't personally use typescript and do not plan to maintain TypeScript typings. If these fall out of maintenance and we start getting bug reports on them, I will not expend effort to fix them personally. It's not heartless, it's a matter of time.

So if you're willing to accept that, then I'm happy to merge this PR.

@vutran
Copy link
Contributor Author

vutran commented Jul 31, 2017

Of course. No expectations on your end. Hopefully the community can help build the TS definitions up alongside Flow in the other PR.

@kentcdodds
Copy link
Member

Awesome! Thanks! If you don't mind, I'd like to wait until the API has settled a bit before we merge TypeScript typings. I don't want you to have to deal with at churn while we figure out what's best 👍

@kentcdodds
Copy link
Member

Alright! I'm pretty confident the API has solidified, so if you'd like to update this PR that would be awesome 😄

Thanks!

@vutran
Copy link
Contributor Author

vutran commented Aug 9, 2017

@kentcdodds Not sure how you want tests for these definitions, but I made a repo here with the example provided in the README.

@kentcdodds
Copy link
Member

For testing, maybe you could look at the glamorous repo. Maybe @luke-john could help guide this?

@luke-john
Copy link

Most projects simply test definitions by having a single test file that covers the api. ie.

// ./typings/add-numbers.d.ts
declare module 'add-two-numbers' {
    type AddTwoNumbers = (x: number, y: number) => x + y

    export default const addTwoNumbers: AddTwoNumbers
}

// ./test/add-numbers.ts
import addTwoNumbers from 'add-two-numbers'

const test: number = addTwoNumbers(1, 5)

With glamorous we took things a bit further to try and decrease the chance of regressions.

In addition to the above style test we also have a test/should-fail.ts which goes through the api and attempts to break things. ie.

// ./test/should-fail.ts
import addNumbers from 'add-numbers'

const test: number = addTwoNumbers(1)
const test: number = addTwoNumbers(1)
const test: number = addTwoNumbers('1', 5)
const test: number = addTwoNumbers(1, '5')
const test: number = addTwoNumbers(1, 5, 1)
const test: number = addTwoNumbers(1, 5, 1)

Given the current size of the typings just having a single test file is probably suitable.

It would be good to add a ~test:ts script to the package.json which runs typescript with the noEmit flag to test these.

Also if these typings are likely to grow in complexity you may want to consider landing them under a typings folder and adding "typings": "typings/index.d.ts",. This should make it easier to break into seperate files without polluting the top level folder.

@luke-john
Copy link

Just looking in the typings, it appears there's still a number of anys. This is fine, however you may want to add a note to the README that the typescript typings are still incomplete and contain anys to help set expectations for other users.

In Glamorous we added the following to a other/TYPESCRIPT_USAGE.md file and linked to this from the README.md.

# Typescript Usage

The current bundled typescript definitions are incomplete and based around the needs of the developers who contributed them.

Pull requests to improve them are welcome and appreciated. If you've never contributed to open source before, then you may find [this free video course](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) helpful.

index.d.ts Outdated
}

type ChildrenFunction = (options: ControllerStateAndHelpers) => React.ReactNode;
interface Downshift extends React.ComponentClass<Downshift.Props> { }

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having an interface named Downshift inside a Downshift namespace which passes the namespaces Props as Downshift.Props seems like it may cause confusion.

It may be simpler to keep everything at the top level. ie.

interface Props {
 ...
}

const downshift: React.ComponentClass<Props>

export default downshift

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the suggestions! Will take note and address them :)

@vutran
Copy link
Contributor Author

vutran commented Aug 9, 2017

Most projects simply test definitions by having a single test file that covers the api. ie.

I was thinking of creating some test files based on the given examples but since it wouldn't make sense to place it into src/__tests__. I'm thinking src/__ts_tests__ but that may be a bit confusing to some users.

It would be good to add a ~test:ts script to the package.json which runs typescript with the noEmit flag to test these.

Will do.

Just looking in the typings, it appears there's still a number of anys. This is fine, however you may want to add a note to the README that the typescript typings are still incomplete and contain anys to help set expectations for other users.

I left the any types for items to start off with but will gladly introduce a generic for items.

@kentcdodds
Copy link
Member

Thanks @luke-john!!

@vutran, if you could put the typescript test script in package-scripts under test that would be optimal. Then we can add it to the validate script to make it run concurrently 👍

@vutran
Copy link
Contributor Author

vutran commented Aug 15, 2017

@kentcdodds Just a quick update, will try to find some time this week to address the requested chances. (Apologies, trying to recover from outsidelands and work-related stuff in the same time).

@kentcdodds
Copy link
Member

Sounds good. Thank you!

@vutran
Copy link
Contributor Author

vutran commented Aug 17, 2017

Okay, I think this is ready for a review. @luke-john

  • Removed Downshift namespace and have everything under the root namespace.
  • Export all interface to allow importing during usage.
  • Added tsc --noEmit test to package-scripts and added to the validate nps script.
  • Added other/TYPESCRIPT_USAGE.md
  • Moved typings to typings/index.d.ts

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Things look perfect as far as I can tell! Thank you so much for this!

@luke-john
Copy link

These are looking good to me @vutran. Great work 👍.

It looks like this project is using rollup in a similar way to glamorous so you may hit an issue with typescript not playing nice with the rollup compilation. If so the following addition to the entry file should solve things. paypal/glamorous#104

@kentcdodds kentcdodds merged commit 033c6aa into downshift-js:master Aug 18, 2017
@kentcdodds
Copy link
Member

Awesome! We're not on auto-release yet, but I'll get this published soon. Thanks so much @vutran! 🎉

@vutran vutran deleted the ts-definitions branch August 18, 2017 19:51
@vutran
Copy link
Contributor Author

vutran commented Aug 19, 2017

It looks like this project is using rollup in a similar way to glamorous so you may hit an issue with typescript not playing nice with the rollup compilation. If so the following addition to the entry file should solve things. paypal/glamorous#104

I can open a new PR for this if needed.

@kentcdodds
Copy link
Member

Feel free! I leave the TS stuff entirely up to other folks since I don't really use it 🤷‍♂️

@kentcdodds
Copy link
Member

~/Developer/downshift (master)
🏎  $ npm publish --tag rc
+ downshift@1.0.0-rc.15

Let's try this out!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants